<template>
	<page-meta>
		<navigation-bar title="首页" color="#000000">
			<text v-if="isLoading == false" class="city-name">{{ cityName }}</text>
		</navigation-bar>
	</page-meta>
	<view class="page">
		<view v-if="isLoading == true"><image class="loading" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/loading-1.gif"></image></view>
		<view v-if="isLoading == false">
			<image class="image" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/dingwei.png"></image>
			<uni-popup ref="popupMsg" type="top"><uni-popup-message type="success" :message="'接收到' + lastRows + '条消息'" :duration="2000" /></uni-popup>
			<uni-search-bar class="search" @confirm="onSearch" v-model="searchValue" placeholder="请输入搜索关键字"></uni-search-bar>
			<swiper circular autoplay interval="3000" class="swiper">
				<swiper-item>
					<image mode="widthFix" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%871.png"></image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%872.png"></image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%873.png"></image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%874.png"></image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%875.png"></image>
				</swiper-item>
				<!-- <swiper-item><image mode="widthFix" src="../../static/微信图片3.png"></image></swiper-item>
				<swiper-item><image mode="widthFix" src="../../static/微信图片3.png"></image></swiper-item>
				<swiper-item><image mode="widthFix" src="../../static/微信图片3.png"></image></swiper-item>
				<swiper-item><image mode="widthFix" src="../../static/微信图片3.png"></image></swiper-item>
				<swiper-item><image mode="widthFix" src="../../static/微信图片3.png"></image></swiper-item> -->
			</swiper>
			<view class="line">————————————————————————————————————————————————————</view>
			<!-- <image class="ima" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230411154637.png"></image> -->
			<button class="all" @tap="toPage('全部活动', '../all_activity/all_activity')" size="mini">全部活动</button>
			<view class="all-all">
				<!-- <image class="ima" src="../../static/微信图片3.png"></image> -->
				<image class="ima" src="https://huajia-online-1316192331.cos.ap-guangzhou.myqcloud.com/static/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230411154637.png"></image>
				<view class="di">近期活动</view>
			</view>
			<uni-list class="list-all" v-for="one in list">
				<uni-card class="card" @click="jump(one.id)" :title="one.district" extra="进入报名">
					<text class="text1">{{ one.title }}</text>
					<br />
					<br />
					<text class="text2">{{ one.createTime }}</text>
					<text class="text3" v-if="one.lea > 0" style="color: limegreen;">剩余名额:{{ one.lea }}</text>
					<text class="text3" v-if="one.lea == 0" style="color: red;">剩余名额:{{ one.lea }}</text>
				</uni-card>
			</uni-list>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
var qqmapsdk;
export default {
	components: {
		uniPopup,
		uniPopupMessage,
		uniPopupDialog,
		uniCalendar
	},
	data() {
		return {
			timer: null,
			unreadRows: 0,
			lastRows: 0,
			list: [],
			msg: '名额剩余',
			cityName: '',
			searchValue: '',
			isLoading: true
		};
	},
	onLoad() {
		let that = this;
		(qqmapsdk = new QQMapWX({
			key: 'KSFBZ-2MX6J-2PRFM-KVWBE-37KUE-W3FLZ'
		})),
			uni.getLocation({
				type: 'wgs84',
				success: function(resp) {
					let latitude = resp.latitude;
					let longitude = resp.longitude;
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: latitude,
							longitude: longitude
						},
						success: function(resp) {
							// console.log(resp.result)
							let address = resp.result.address;
							let addressComponent = resp.result.address_component;
							let nation = addressComponent.nation;
							let province = addressComponent.province;
							let city = addressComponent.city;
							that.cityName = addressComponent.city;
							let district = addressComponent.district;
						}
					});
				}
			});
		setTimeout(function(resp) {
			that.isLoading = false;
		}, 800);

		// let that = this;
		// uni.$on('showMessage', function() {
		// 	that.$refs.popupMsg.open();
		// });
		// that.ajax(that.url.searchAllActivityByPage, 'POST', { page: 1, length: 30 }, function(resp) {
		// 	that.list = resp.data.result;
		// 	console.log(that.list);
		// });
	},
	onUnload: function() {
		// 移除监听事件
		uni.$off('showMessage');
	},
	onShow: function() {
		let that = this;
		uni.$on('showMessage', function() {
			that.$refs.popupMsg.open();
		});
		that.ajax(that.url.searchAllActivityByPage, 'POST', { page: 1, length: 15 }, function(resp) {
			that.list = resp.data.result;
		});
		that.timer = setInterval(function() {
			that.ajax(that.url.refreshMessage, 'GET', null, function(resp) {
				that.unreadRows = resp.data.unreadRows;
				that.lastRows = resp.data.lastRows;
				if (that.lastRows > 0) {
					uni.$emit('showMessage');
				}
			});
		}, 6 * 1000);
	},
	onHide: function() {
		clearInterval(this.timer);
	},
	onReachBottom: function() {},
	methods: {
		onSearch(res) {
			this.searchValue = res.value;
			uni.navigateTo({
				url: '/pages/search_result/search_result?searchValue=' + this.searchValue + "&flag=0"
			});
		},
		jump: function(id) {
			uni.navigateTo({
				url: '/pages/message/message?id=' + id + '&&isEnroll=0'
			});
		},
		showPopup() {
			this.show = true;
		},
		toPage: function(name, url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="less">
@import url('index.less');
</style>
